<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="static/css/main.css">
    <script src="static/js/require.js"></script>
    <script src="static/js/main.js"></script>

</head>
<body>

<div style="width: 100%;height:500px" id="heatmapContainer">

</div>

<script>

    require(['jquery', 'lib/heatmap'], function ($) {

        var config = {
            container: document.getElementById('heatmapContainer')
        };


        var heatmapInstance = h337.create(config);
        heatmapInstance.setData({
            max: 100,
            min: 0,
            data: [
                {
                    x: 100, // x coordinate of the datapoint, a number
                    y: 100, // y coordinate of the datapoint, a number
                    value: 30 // the value at datapoint(x, y)
                }, {
                    x: 200, // x coordinate of the datapoint, a number
                    y: 200, // y coordinate of the datapoint, a number
                    value: 50 // the value at datapoint(x, y)
                }, {
                    x: 300, // x coordinate of the datapoint, a number
                    y: 300, // y coordinate of the datapoint, a number
                    value: 20 // the value at datapoint(x, y)
                }, {
                    x: 400, // x coordinate of the datapoint, a number
                    y: 500, // y coordinate of the datapoint, a number
                    value: 80 // the value at datapoint(x, y)
                }
            ]
        });

    });

</script>

</body>
</html>